<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - 数据表格</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link rel="shortcut icon" href="${ctx}/favicon.ico">
<link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">

<!-- Data Tables -->
<link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">

<link href="${ctx}/css/animate.css" rel="stylesheet">
<link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">

<!-- 全局js -->
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>

<script src="${ctx}/js/bootstrap-paginator.js"></script>
<script src="${ctx}/js/plugins/jeditable/jquery.jeditable.js"></script>


<!-- Data Tables -->
<script src="${ctx}/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${ctx}/js/plugins/dataTables/dataTables.bootstrap.js"></script>

<!-- 引入 Jquery.validate.js 表单验证框架 -->
<script src="${ctx}/js/jquery.validate.min.js"></script>
<script src="${ctx}/js/messages_zh.min.js"></script>


<!-- 引入弹框插件 layer  -->
<script src="${ctx}/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="${ctx}/js/content.js?v=1.0.0"></script>

<!-- layerDate plugin javascript -->
<script src="${ctx}/js/plugins/layer/laydate/laydate.js"></script>
</head>

<body class="gray-bg">
	
	<div class="col-sm-12">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				
				<div class="ibox-tools">
					<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
					</a> <a class="dropdown-toggle" data-toggle="dropdown"
						href="table_data_tables.html#"> <i class="fa fa-wrench"></i>
					</a>
					<ul class="dropdown-menu dropdown-user">
					
					</ul>
					<a class="close-link"> <i class="fa fa-times"></i>
					</a>
				</div>
			</div>
			<div class="ibox-content">

				<div id="DataTables_Table_0_wrapper"
					class="dataTables_wrapper form-inline" role="grid">
					<div class="row">
						<div class="col-sm-6">
						<a class="btn btn-success" data-toggle="modal" href="#addmodal-form">增加</a>
						
						</div>
						<div class="col-sm-6">
							<div id="DataTables_Table_0_filter" class="dataTables_filter">
								<label>查找：<input class="form-control input-sm" placeholder="最少两位要搜索的关键字"
									aria-controls="DataTables_Table_0" type="search" id="search" value="${keyword}"></label>
							</div>
						</div>
					</div>
					<table
						class="table table-striped table-bordered table-hover dataTables-example dataTable"
						id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
						<thead>
							<tr role="row">
								<tr role="row">
								<th class="sorting_asc" tabindex="0" ><span></span>申请人</th>
								<th class="sorting_asc" tabindex="0" ><span></span>延期到（日期）</th>
								
								<th class="sorting_asc" tabindex="0" ><span></span>申请原因</th>
								<th class="sorting_asc" tabindex="0" ><span></span>批复状态</th>
								<th class="sorting_asc" tabindex="0" ><span></span>批复时间</th>
								<th class="sorting_asc" tabindex="0" ><span></span>批复人</th>
								<th class="sorting_asc" tabindex="0" ><span></span>操作 </th>
							</tr>
						</thead>
						<tbody>
							<!-- 使用标签库 c:forEach 循环 集合 ${users} -->
							<c:forEach items="${pageResult.dataList}" var="approveLists">
								<tr id= "tr_${approveLists.id}"  class="gradeA odd">
									<td class="">${approveLists.applyclerk}</td>
									<td class="">${approveLists.delayfintime}</td>
			
									<td class="">${approveLists.delayreason}</td>
									<td class="" style="${approveLists.status eq 0 ? 'color:orange':""
									 || approveLists.status eq 1 ? 'color:green':'color:red'}">${approveLists.status eq 0 ? '审核中':"" || approveLists.status eq 1 ? '同意':'拒绝'}</td>
									<td class="">${approveLists.replytime}</td>
									<td class="">${approveLists.replyman}</td>
									<td class="">
									<a onclick="updateSysUser(this)" class="btn btn-info" data-toggle="modal" href="#modal-form" 
									data-id="${approveLists.id}"
									data-title="${approveLists.title}"
									data-content="${approveLists.content}"
									data-applyclerk="${approveLists.applyclerk}"
									data-applytime="${approveLists.applytime}"
									data-delayfintime="${approveLists.delayfintime}"
									data-delayreason="${approveLists.delayreason}"
									
									>批复</a>
										
										<a onclick="updateSysUser(this)" class="btn btn-info" data-toggle="modal" href="#lookmodal-form" 
									
									data-title="${approveLists.title}"
									data-content="${approveLists.content}"
									data-applyclerk="${approveLists.applyclerk}"
									data-applytime="${approveLists.applytime}"
									data-delayfintime="${approveLists.delayfintime}"
									data-delayreason="${approveLists.delayreason}"
									data-status="${approveLists.status}"
									data-replytime="${approveLists.replytime}"
									data-delayopinion="${approveLists.delayopinion}"
								
	
									>查看</a>
									<button onclick="delDeyUser(this,${approveLists.id})" class="btn btn-default">删除</button>
									</td>
								</tr>
							</c:forEach>
						</tbody>
						
					</table>
					<div class="col-sm-13">
						<div id="example" style="text-align: right"> <ul id="pageLimit"></ul> </div>
						</div>
					</div>
				</div>

			</div>
		</div>


<!-- 批復模态对话框 -->
<div id="modal-form" class="modal fade" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-12">
							<h3 class="m-t-none m-b">延期申请批复</h3>


							<form class="form-horizontal" action="" method="get" id="regForm">
								<!-- 隐藏域:带上用户的id -->
								<input type="hidden" name="id">
							<div class="form-group">
								<label class="col-sm-3 control-label">任务标题：</label>
								<div class="col-sm-7">
									<input type="text" id="" name="title" placeholder=""
										class="form-control" placeholder="" readonly="readonly">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">任务内容：</label>
								<div class="col-sm-7">
									<input type="text" id="" name="content" placeholder=""
										class="form-control" placeholder="" readonly="readonly">
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">申请人：</label>

								<div class="col-sm-7">
									<input type="text" name="applyclerk" placeholder=""
										class="form-control" readonly="readonly">
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">完成时间：</label>
								<div class="col-sm-7">
									<input type="text" name="applytime" class="form-control"
										placeholder="" readonly="readonly">

								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">延期时间：</label>
								<div class="col-sm-7">
									<input type="text" name="delayfintime" class="form-control"
										placeholder="" readonly="readonly">

								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">延期原因：</label>
								<div class="col-sm-7">
									<input type="text" class="form-control" name="delayreason"
										placeholder="" readonly="readonly">
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">是否同意：</label>
								<div class="col-sm-7">
									<select class="form-control m-b" name="status" id="status">
										<option>同意</option>
										<option>拒绝</option>
										
									</select>
								</div>
							</div>
							
							
								<div class="form-group">
										<label class="col-sm-3 control-label">延期到：</label>
										<div class="col-sm-8">
											<input id="hello" name="replytime"
												class="laydate-icon form-control layer-date">
										</div>
									</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">详细意见：</label>
								<div class="col-sm-7">
									<input id="delayopinion" name="delayopinion"
										class="form-control">
								</div>
							</div>


							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button class="btn btn-sm btn-primary" id="update_btn"  type="submit">确认提交</button>
									<!-- <button  class="btn btn-sm " type="reset">重置</button> -->
								</div>
							</div>
						</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>



<!-- 查看模态对话框 -->
<div id="lookmodal-form" class="modal fade" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-12">
							<h3 class="m-t-none m-b">延期申请批复</h3>


							<form class="form-horizontal" action="" method="post" id="form2">
								<!-- 隐藏域:带上用户的id -->
								<input type="hidden" name="id">
							<div class="form-group" id="">
								<label class="col-sm-3 control-label">任务标题：</label>

								<div class="col-sm-7">
									<input id="uname" readonly="readonly" type="text" name="title" placeholder=""
										class="form-control" placeholder="" required="required">
									<span class="help-block m-b-none" id=""></span>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">任务内容：</label>
								<div class="col-sm-7">
									<input type="text" id="" name="content" placeholder=""
										class="form-control" placeholder="" readonly="readonly">
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">申请人：</label>

								<div class="col-sm-7">
									<input type="text" name="applyclerk" placeholder=""
										class="form-control" readonly="readonly">
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">完成时间：</label>
								<div class="col-sm-7">
									<input type="text" name="applytime" class="form-control"
										placeholder="" readonly="readonly">

								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">延期时间：</label>
								<div class="col-sm-7">
									<input type="email" name="delayfintime" class="form-control"
										placeholder="" readonly="readonly">

								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">延期原因：</label>
								<div class="col-sm-7">
									<input type="text" class="form-control" name="delayreason"
										placeholder="" readonly="readonly">
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">是否同意：</label>
								<div class="col-sm-7">
										<input type="text" class="form-control" name="status"
										placeholder="" readonly="readonly">
								</div>
							</div>
							
							
								<div class="form-group">
										<label class="col-sm-3 control-label">延期到：</label>
										<div class="col-sm-7">
									<input type="text" class="form-control" name="replytime"
										placeholder="" readonly="readonly">
										</div>
									</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">详细意见：</label>
								<div class="col-sm-7">
									<input id="" name="delayopinion"
										class="form-control" readonly="readonly">
								</div>
							</div>

						</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>



<!-- 添加模态对话框 -->
<div id="addmodal-form" class="modal fade" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-12">
							<h3 class="m-t-none m-b">延期申请创建</h3>


							<form class="form-horizontal" action="" method="post" id="addform">
								<!-- 隐藏域:带上用户的id -->
								<input type="hidden" name="id">
							<div class="form-group" id="">
								<label class="col-sm-3 control-label">任务标题：</label>

								<div class="col-sm-7">
									<input id="" type="text" name="addtitle" placeholder=""
										class="form-control" placeholder="" required="required">
									<span class="help-block m-b-none" id=""></span>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">任务内容：</label>
								<div class="col-sm-7">
									<input type="text" id="" name="addcontent" placeholder=""
										class="form-control" placeholder="" >
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-sm-3 control-label">申请人：</label>

								<div class="col-sm-7">
									<input type="text" name="addapplyclerk" placeholder=""
										class="form-control" >
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">完成时间：</label>
								<div class="col-sm-7">
										<input type="text" name="addapplytime" class="laydate-icon form-control layer-date"
										placeholder="" id="hello2">

								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">延期时间：</label>
								<div class="col-sm-7">
									<input type="text" name="adddelayfintime" class="laydate-icon form-control layer-date"
										placeholder="" id="hello1">

								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">延期原因：</label>
								<div class="col-sm-7">
									<input type="text" class="form-control" name="adddelayreason"
										placeholder="" >
								</div>
							</div>

							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button class="btn btn-sm btn-primary" id="app_update_btn"  type="submit">确认提交</button>
									<!-- <button  class="btn btn-sm " type="reset">重置</button> -->
								</div>
							</div>
							
							
							

						</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	

	<script>
		//外部js调用
		laydate({
			elem : '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			event : 'focus' //响应事件。如果没有传入event，则按照默认的click
		});
		laydate({
			elem : '#hello1', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			event : 'focus' //响应事件。如果没有传入event，则按照默认的click
		});
		laydate({
			elem : '#hello2', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
			event : 'focus' //响应事件。如果没有传入event，则按照默认的click
		});
		//日期范围限制
		var start = {
			elem : '#start',
			format : 'YYYY/MM/DD hh:mm:ss',
			min : laydate.now(), //设定最小日期为当前日期
			max : '2099-06-16 23:59:59', //最大日期
			istime : true,
			istoday : false,
			choose : function(datas) {
				end.min = datas; //开始日选好后，重置结束日的最小日期
				end.start = datas //将结束日的初始值设定为开始日
			}
		};
		var end = {
			elem : '#end',
			format : 'YYYY/MM/DD hh:mm:ss',
			min : laydate.now(),
			max : '2099-06-16 23:59:59',
			istime : true,
			istoday : false,
			choose : function(datas) {
				start.max = datas; //结束日选好后，重置开始日的最大日期
			}
		};
		laydate(start);
		laydate(end);
	</script>


<script type="text/javascript">

/**
 *@param obj dom对象本身
 *@param id 需要删除的用户id 
 */
function delDeyUser(obj,id){
	//使用ajax向后台发送删除操作的请求,并带上 删除的id
	layer.confirm('亲,确定要删除此用户么,删除后不可恢复!!!', {icon: 3, title:'温馨提示'}, function(index){
		
		//使用ajax向后台发送删除操作的请求,并带上 删除的id
		$.get("${ctx}/delay.gzsxt?cmd=delDeyUser",{id:id},function(data){
			
			if(data.code == 1){//删除成功
				//使用js删除当前行tr
				//思路:点击的是当前按钮,获取父元素 td,再获取td的父元素 tr,删除tr即可
				var tr =  $(obj).parent().parent();
				tr.remove();
				//思考任务:考虑当前页数据删除完毕以后应该怎么处理
			}else{//删除失败
				layer.alert(data.msg, {
					  skin: 'layui-layer-molv' //样式类名
				});
			}
			
			 layer.close(index);//关闭当前窗口
		});
	});

}
 
 

function updateSysUser(obj){
	
	//获取当前超链接上面的所有data-xx属性
	var id = $(obj).data("id");
	var title = $(obj).data("title");
	var content = $(obj).data("content");
	var applyclerk = $(obj).data("applyclerk");
	var delayreason = $(obj).data("delayreason");
	var delayfintime = $(obj).data("delayfintime");
	var status = $(obj).data("status");
	var replytime = $(obj).data("replytime");
	var delayopinion = $(obj).data("delayopinion");
	var applytime = $(obj).data("applytime");
	//debugger;
	console.log(obj);
	
	
	//获取form表单
	var regFrom = $("#regForm")[0];
	var form2 = $("#form2")[0];
	
	
	//将获取的数组赋值给表单元素对于的value的值
	regFrom.id.value=id;
	regForm.title.value=title;
	regFrom.status.value=status;
	regForm.content.value = content;
	regForm.applyclerk.value = applyclerk;
	regForm.applytime.value = applytime;
	regForm.delayfintime.value = delayfintime;
	regForm.delayreason.value = delayreason;


	//将获取的数组赋值给表单元素对于的value的值
	form2.id.value=id;
	form2.title.value=title;
	form2.content.value = content;
	form2.applyclerk.value = applyclerk;
	form2.applytime.value = applytime;
	form2.delayfintime.value = delayfintime;
	form2.delayreason.value = delayreason;
	form2.status.value = (status == 0 ? '审核中':"" || status == 1 ? '同意' : '拒绝'  );	
	form2.replytime.value = replytime;
	form2.delayopinion.value = delayopinion;

	
}



$(function(){
		var pageSize = ${pageResult.pageSize};
	$('#pageLimit').bootstrapPaginator({
		currentPage : ${pageResult.currentPage},
		totalPages : ${pageResult.totalPage},
		size : "normal",
		bootstrapMajorVersion : 3,
		alignment : "right",
		numberOfPages : 6,
		itemTexts : function(type, page, current) {
			switch (type) {
			case "first":
				return "首页";
			case "prev":
				return "上一页";
			case "next":
				return "下一页";
			case "last":
				return "尾页";
			case "page":
				return page;
			}
		},onPageClicked: function (event, originalEvent, type, page) {
			//TODO具体页面操作
			//跳转到后台用户列表，传递当前页以及每页条数的参数
			window.location.href="${ctx}/delay.gzsxt?cmd=approve&currentPage="+page+"&pageSize="+pageSize+"&keyword=${keyword}";
		}
	});
	//监听搜索框的键盘按下事件：如果用户按的是回车键，就触发向后台发送请求的操作
	$("#search").keyup(function(event){
		//event是js事件编程中的一个内置对象，可以获取当前用户按下键盘任意键的所有信息
		//键盘的每一个数字都是队友的ASCII码，13是Enter 键盘
		if(event.keyCode == 13){
			if($(this).val().length < 2){
				return false;
			}
			
			window.location.href = "${ctx}/delay.gzsxt?cmd=approve&keyword="+$(this).val();
		}
	})

	
	//为修改表单绑定 jquery.validate表单校验框架
	$("#addform").validate({
		rules:{
			addtitle:"required",
			addcontent:"required" ,
			addapplyclerk:"required" ,
			addapplytime:"required",
			adddelayfintime:"required",
			adddelayreason:"required"

		},
		messages:{
			addtitle:"任务标题不能为空",
			addcontent:"任务内容不能为空",
			addapplyclerk:"申请人不能为空",
			addapplytime:"完成时间不能为空",
			adddelayfintime:"延期时间不能为空",
			adddelayreason:"延期原因不能为空"
		},
		/* 校验完毕触发的事件 */
		submitHandler : function(){
			//序列化表单
			var addformData = $("#addform").serialize();
			alert(addformData);
			//发送ajax请求去后台修改数据
			$.post("${ctx}/delay.gzsxt?cmd=addform",addformData,function(data){
				if(data.code == 1){
					//使用layer插件进行弹框提示
					//墨绿深蓝风
					layer.alert(data.msg,{
						skin: 'layui-layer-molv' ,//样式类名
						closeBtn: 0
					},function(index){
						layer.close(index);
						$("#addform")[0].reset();
					});
				}else{
					layer.alert(data.msg,{
						 skin: 'layui-layer-molv' //样式类名
					})
				}
				
				});
			
		}
	});
	

	 
	 
	
	//为修改表单绑定 jquery.validate表单校验框架
	$("#regForm").validate({
		rules:{
			status:"required",
			replytime:"required" ,
			delayopinion:"required" 
		},
		messages:{
			status:"批复不能为空",
			replytime:"截止时间不能为空",
			delayopinion:"详细意见不能为空"
		},
		/* 校验完毕触发的事件 */
		submitHandler : function() {
			//序列化表单
			var regFormData = $("#regForm").serialize();
			
			//发送ajax请求去后台修改数据
			$.get("${ctx}/delay.gzsxt?cmd=updateUser",regFormData,function(data){
				console.log(data)
				if(data.code == 1){//提交成功
					window.location.href = window.location.href;
					
				//将修改的数据设置当前用对应的行中
				//获取form表单
					var regForm = $("#regForm")[0];
				//获取当前修改数据对应的 的行 
					var tr = $("#tr_"+regForm.id.value);
					console.log(tr);
					//获取当前行的所有td
					var tds = tr.children();
					
					//将表单的昵称设置给第四列数据
					$(tds).eq(3).text(regForm.status.value);
					//将批复的值同步显示在浏览器上面
					if(regForm.status.value == "同意"){
						$(tds).eq(3).css({ color: "green" });
					}else{
						$(tds).eq(3).css({ color: "red" });
					}
					$(tds).eq(4).text(regForm.replytime.value);
					
					
					
					//隐藏模态窗口
					$('#modal-form').modal('hide');
				}
				
				
			});
			
		}
		
	});
	
	
});
</script>


</body>

</html>
